Skip to content

navya-html-projects#526

Open
navya-1417 wants to merge 1 commit intoaptyInc:mainfrom
navya-1417:navya-html-project
Open

navya-html-projects#526
navya-1417 wants to merge 1 commit intoaptyInc:mainfrom
navya-1417:navya-html-project

Conversation

@navya-1417
Copy link
Copy Markdown

@navya-1417 navya-1417 commented Sep 30, 2025

Terms and Conditions

  • I Accept losing points if my PR does not follow the best practices mentioned below, which will impact my overall performance in training

HTML Best Practices

  • File Naming Convention:

  • Follow consistent and descriptive naming (e.g., dashboard.html, user-profile.html).

  • Use lowercase letters and hyphens instead of spaces.

  • Page Title:

  • Ensure the <title> tag is descriptive and aligns with the page content.

  • Include meaningful keywords for SEO if applicable.

  • Semantic Markup:

  • Use appropriate tags like <header>, <footer>, <section>, <article> for better readability and accessibility.

  • Accessibility Standards:

  • Ensure the use of alt attributes for images and proper labels for form elements.

  • Use ARIA roles where necessary.

  • Validation:

  • Ensure the code passes HTML validation tools without errors or warnings.

  • Structure and Indentation:

  • Maintain consistent indentation and proper nesting of tags.

  • Attributes:

  • Ensure all required attributes (e.g., src, href, type, etc.) are correctly used and not left empty.

CSS Best Practices

  • File Organization:

  • Use modular CSS files if applicable (e.g., base.css, layout.css, theme.css).

  • Avoid inline styles unless absolutely necessary.

  • Naming Conventions:

  • Use meaningful class names following BEM or other conventions (e.g., block__element--modifier).

  • Code Reusability:

  • Avoid duplicate code; use classes or mixins for shared styles.

  • Responsive Design:

  • Ensure proper usage of media queries for mobile, tablet, and desktop views.

  • Performance Optimization:

  • Minimize the use of unnecessary CSS selectors.

  • Avoid overly specific selectors and ensure selectors are not overly deep (e.g., avoid #id .class1 .class2 p).

  • Consistency:

  • Follow consistent spacing, indentation, and use of units (rem/em vs. px).

  • Maintain a single coding style (e.g., always use double or single quotes consistently).

Javascript Best Practices

  • File Organization:

  • Ensure scripts are modular and logically separated into files if needed.

  • Avoid mixing inline JavaScript with HTML.

  • Logic Optimization:

  • Check for redundancy and ensure the code is optimized for performance.

  • Avoid unnecessary API calls or DOM manipulations.

  • Solution Approach:

  • Confirm that the code solves the given problem efficiently.

  • Consider scalability for future enhancements.

  • Readability:

  • Use clear variable and function names.

  • Add comments for complex logic or algorithms.

  • Error Handling:

  • Ensure proper error handling for API calls or user input validation.

  • Code Quality:

  • Check for potential bugs (e.g., missing await, mishandling of null/undefined values).

  • Avoid unnecessary console.log statements in production code.

  • Security:

  • Avoid hardcoding sensitive data.

  • Sanitize user input to prevent XSS and other vulnerabilities.

  • Best Practices:

  • Use const and let instead of var.

  • Follow ES6+ standards where applicable.

@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello @navya-1417, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a set of new HTML projects, structured under the author's dedicated directory. It includes an 'index.html' to organize and display two distinct assignments: a personal homepage and a product landing page. These projects collectively demonstrate fundamental web development skills, focusing on semantic HTML, form handling, and content presentation.

Highlights

  • New HTML Project Structure: An 'index.html' file has been added to serve as a central hub for navigating between different HTML assignments, embedding them via iframes.
  • Personal Homepage Creation: A new 'personal-homepage.html' has been introduced, showcasing basic semantic HTML, personal details, education, skills, and a contact form.
  • Product Landing Page Development: A 'product-landing_page.html' has been added, featuring navigation, product features, an embedded video, and a pricing table, demonstrating a more complex layout.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request adds three HTML files for a set of projects. The overall structure and use of semantic HTML are good. However, I've identified several areas for improvement. The main issues are the use of obsolete HTML attributes for styling (frameborder, border), which should be replaced with CSS, and some accessibility concerns like missing title attributes on iframes. I've also pointed out some structural issues in a form and minor formatting inconsistencies. My comments include specific suggestions to help you address these points and adhere to modern web development best practices.

<body>
<details>
<summary>Assignment 1</summary>
<iframe src="./project-1/personal-homepage.html" frameborder="0" width="100%"></iframe>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The frameborder attribute is obsolete in HTML5 and should not be used. Styling should be done with CSS. Additionally, for accessibility, it's important to provide a title attribute for <iframe> elements so screen readers can describe the frame's content to the user.

Suggested change
<iframe src="./project-1/personal-homepage.html" frameborder="0" width="100%"></iframe>
<iframe src="./project-1/personal-homepage.html" title="Assignment 1: Personal Homepage" style="border:0;" width="100%"></iframe>

<summary>
Assignment 2
</summary>
<iframe src="./project-2/product-landing_page.html" frameborder="0" width="100%"></iframe>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Similar to the previous iframe, the frameborder attribute is obsolete and should be replaced with CSS. A title attribute is also missing, which is important for accessibility.

        <iframe src="./project-2/product-landing_page.html" title="Assignment 2: Product Landing Page" style="border:0;" width="100%"></iframe>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>HTML Assignments | Your Name</title>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The page title includes placeholder text "Your Name". This should be updated to reflect your actual name for a more accurate and professional page title.

Suggested change
<title>HTML Assignments | Your Name</title>
<title>HTML Assignments | Navya Jain</title>

Comment on lines +18 to +20
<summary>
Assignment 2
</summary>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The formatting of this <summary> tag is inconsistent with the one for 'Assignment 1'. For better readability and consistency, it's good practice to keep formatting uniform across similar elements.

        <summary>Assignment 2</summary>

<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using <br> tags for creating space between elements is not a recommended practice. All layout and spacing should be handled by CSS for better control and maintainability. A more semantic approach would be to wrap each label/input pair in a block-level element like <p> or <div>. This comment also applies to lines 48, 52, and 56.

<br><br>

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The <textarea> element should ideally have rows and cols attributes to define its default size. This ensures a consistent appearance even if CSS fails to load. Also, consider adding the required attribute if you want to make sure the user fills in this field.

Suggested change
<textarea id="message" name="message"></textarea>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>

</ul>
</nav>


Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This line is empty and contains whitespace. It can be removed to improve code formatting and cleanliness.

Comment on lines +41 to +42
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video"
frameborder="0"
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The frameborder attribute is obsolete in HTML5. Styling should be handled with CSS. I've replaced it with an inline style attribute. For better practice, consider moving styles to a <style> block or an external stylesheet.

Suggested change
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video"
frameborder="0"
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Product Video" style="border: 0;"


<section id="plans">
<h2>Product Plans</h2>
<table border="1">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The border attribute is a presentational attribute and its use is discouraged in HTML5. All styling, including table borders, should be managed with CSS. You can remove this attribute and add CSS rules for table, th, and td to create the desired borders.

Suggested change
<table border="1">
<table>

</table>
</section>


Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This line is empty and contains whitespace. It can be removed for cleaner code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant